<template>
  <div class="home">
    <div class="block text-center">
        <div class="block text-center">
        <el-carousel height="600px">
        <el-carousel-item>
          <img :src="u0" alt="图片" />
        </el-carousel-item>
      </el-carousel>
  </div>
    </div>
    <div class="middle3">
      <div class="head_title"><h1>你的帮助也许改变不了这个世界，但一定能改变它的世界</h1></div>
      <div>
        <div>
          <div class="donate">
            捐款须知
          </div>
          <div style="width: 55%;border-bottom: 1px solid #09C199;"></div>
        </div>
        <div><p style="padding: 20px 0; ">根据“宠窝”平台的管理规则，流浪动物救助站在申请后可以将收款码上传至“宠窝”平台，捐赠者可以任意选定救助站进行捐赠。
“宠窝”平台仅为信息发布的公益平台，不对相关内容的准确性、真实性、正当性、合法性负责，也不承担任何法律责任。最终解释权归“宠窝”平台所有。</p></div>
      </div>
      <FormInfo></FormInfo>
  </div>
    
  </div>
</template>

<script setup lang="ts">
import u0 from '@/assets/images/ScientificRescue/u0.png'
import FormInfo from './components/form.vue'
import {createApp } from "vue";
//注册组件
const app = createApp({});
app.component({FormInfo})
</script>

<style lang="less" scoped>


.middle3 {
  // margin-top: -160px;
  // margin-top: -6vh;
padding: 0 200px;
 .head_title{
  text-align: center;
 }
 .donate{
  background-color: #09C199;
  color: #fff;
  height: 30%;
  width: 10%;
  text-align: center;
  border-radius: 7px 7px 0 0;
  font-weight: 600;
 }
}

.home {
}
.demonstration {
  color: var(--el-text-color-secondary);
}
.el-carousel__item{
  height: auto;
}
.el-carousel__item img {
  width: 100vw;
  height: auto;
  object-fit: contain; /* 或者 object-fit: cover; */
}

.el-carousel__item:nth-child(2n) {
  // background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  // background-color: #d3dce6;
}
</style>
